<!DOCTYPE html>
<!-- saved from url=(0050)http://www.swiper.com.cn//demo/festival/index.html -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>落地页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <!--<link rel="stylesheet" href="/dist/css/swiper.min.css">
    <link rel="stylesheet" href="/dist/css/animate.min.css">
    <script src="/dist/js/swiper.min.js"></script>
    <script src="/dist/js/swiper.animate.min.js"></script>-->

    <link rel="stylesheet" href="/css/swiper.min.css">
    <link rel="stylesheet" href="/css/animate.min.css">
    <script src="/js/swiper.min.js.下载"></script>
    <script src="/js/swiper.animate.min.js.下载"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/style.css">
    <style>
        .uiwm-footpanel {
            width: 100%;
            position: fixed;
            box-shadow: 0 0 4px #aaa;
            bottom: 0;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            height: 48px;
            background-color: #fff;
            z-index: 2;
        }

        .
        .uiwm-footpanel .uiwm-rev {
            width: 100%;
            position: relative
        }

        .uiwm-footpanel .uiwm-rev .uiwm-mp-img {
            width: 64px;
            height: 64px;
            left: 10px;
            top: -30px;
            padding: 2px;
            background: #fff;
            box-shadow: 0 0 4px #aaa;
            border-radius: 50%;
            border: 1px solid #d6d6d6;
            position: absolute
        }

        .uiwm-footpanel .uiwm-rev .uiwm-mp-img img {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            position: absolute;
            z-index: 1
        }

        .uiwm-footpanel .uiwm-rev .uiwm-mp-img::after {
            content: " ";
            display: block;
            position: absolute;
            background-color: #fff;
            width: 76px;
            height: 44px;
            left: -3px;
            top: 29px
        }

        .uiwm-footpanel .uiwm-rev h4 {
            font-size: 15px;
            padding-left: 88px;
            padding-top: 2px
        }

        .uiwm-footpanel .uiwm-rev h4 small {
            font-size: 11px;
            color: #666;
            padding-left: 3px
        }

        .uiwm-footpanel .uiwm-rev .uiwm-mp-phone {
            display: block;
            color: #168adc;
            font-size: 15px;
            padding-left: 88px
        }

        .uiwm-phone-a, .uiwm-message-a {
            width: 48px;
            height: 48px;
            position: absolute;
            top: -1px;
            text-align: center;
            line-height: 48px;
            border: 1px solid #ccc
        }

        .uiwm-phone-a {
            right: 49px
        }

        .uiwm-message-a {
            right: 0
        }

        .uiwm-bmfoot-panel {
            padding-top: 6px;
            padding-bottom: 6px;
            width: 100%;
            position: fixed;
            bottom: 0;
            border-top: 1px solid #ccc;
            background-color: #fff;
            box-shadow: 0 0 4px #aaa
        }

        .uiwm-bmfoot-panel #uiwm_bmflex {
            -webkit-box-pack: center
        }

        .uiwm-bmfoot-panel #uiwm_ggy {
            color: #168adc
        }

        .uiwm-bmfoot-panel #uiwm_signupnow {
            border-radius: 3px;
            color: #fff
        }

        @media screen and (min-width: 321px) {
            .uiwm-footpanel {
                box-shadow: 0 0 4px #aaa;
                height: 55px
            }

            .uiwm-footpanel .uiwm-rev .uiwm-mp-img {
                width: 70px;
                height: 70px;
                left: 10px;
                top: -30px;
                padding: 2px;
                box-shadow: 0 0 4px #aaa
            }

            .uiwm-footpanel .uiwm-rev .uiwm-mp-img img {
                width: 70px;
                height: 70px;
                border-radius: 50%;
                position: absolute;
                z-index: 1
            }

            .uiwm-footpanel .uiwm-rev .uiwm-mp-img::after {
                content: " ";
                width: 85px;
                height: 50px;
                left: -7px;
                top: 29px
            }

            .uiwm-footpanel .uiwm-rev h4 {
                font-size: 17px;
                padding-left: 95px;
                padding-top: 2px
            }

            .uiwm-footpanel .uiwm-rev h4 small {
                font-size: 12px;
                padding-left: 5px
            }

            .uiwm-footpanel .uiwm-rev .uiwm-mp-phone {
                font-size: 17px;
                padding-left: 95px
            }

            .uiwm-phone-a, .uiwm-message-a {
                width: 57px;
                height: 57px;
                line-height: 57px
            }

            .uiwm-phone-a {
                right: 58px
            }

            .uiwm-message-a {
                right: 0
            }

            .uiwm-bmfoot-panel {
                padding-top: 9px;
                padding-bottom: 9px
            }
        }

        a {
            text-decoration: none;
        }

        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
        }

        body {
            font-family: "microsoft yahei";
            background-color: #fff;
        }

        .swiper-container {
            /*  width: 320px;
              height: 480px;*/
            width: 100%;
            height: 100%;
            background: #fff;
        }

        .swiper-slide {
        }

        .swiper-slide {
            width: 100%;
            height: 100%;
            background: url(images/bg.jpg) no-repeat;
            background-size: 100% 105%;
        }

        img {
            display: block;
        }

        .swiper-pagination-bullet {
            width: 6px;
            height: 6px;
            background: #fff;
            opacity: .4;
        }

    </style>
</head>

<body>

<div class="">
    <div id="app">
        <mt-popup
                v-model="popupVisible"
                style="width: 90%;height: 200px;z-index: 100"
                :modal="false"

        >
            <div>

                <mt-field style="margin-top: 30px" label="手机号" placeholder="请输入手机号" type="tel" v-model="mobile"></mt-field>
                <mt-field label="验证码" v-model="code">
                    <mt-button type="danger" size="normal" v-if="!showCountDown" :disabled="mobile==''"
                               @click="sendMessage">发送验证码
                    </mt-button>
                    <mt-button type="danger" size="normal" v-if="showCountDown">@{{countDown}}s</mt-button>
                </mt-field>
                <div style="width: 100%;display: flex;align-items: center;justify-content: center;">
                    <mt-button  type="danger" size="normal" @click="saveMessage"  :disabled="!(mobile&&code)">提交</mt-button>
                    <div style="color:red">@{{errorMessage}}</div>
                </div>
            </div>
        </mt-popup>
        <div><img src="/images/c1.jpg" style="width:100%;"></div>
        <div><img src="/images/c2.jpg" style="width:100%;"></div>
        <div><img src="/images/c3.jpg" style="width:100%;"></div>
        <div><img src="/images/c4.jpg" style="width:100%;"></div>
        <div><img src="/images/c5.jpg" style="width:100%;"></div>
        <div><img src="/images/c6.jpg" style="width:100%;"></div>
        <div><img src="/images/c7.jpg" style="width:100%;"></div>
        <div><img src="/images/c8.jpg" style="width:100%;"></div>
        <div><img src="/images/c9.jpg" style="width:100%;"></div>
        <div><img src="/images/c10.jpg" style="width:100%;"></div>

        <div class="uiwm-footpanel" id="cardDiv" style="display: flex;align-content: center;justify-content: center;">
            <mt-button @click="handleClick" type="danger">咨询我们</mt-button>

        </div>

    </div>
</div>


<script>

    //所有.resize元素 根据当前窗口的大小进行宽高调整：
    //当前页面的所有元素以窗口宽度320，高度480为基准进行高宽设计的。所以适应其他窗口时进行比例调整(比例为：window.innerWidth/320,window.innerHeight/480)。
    scaleW = window.innerWidth / 320;
    scaleH = window.innerHeight / 480;
    var resizes = document.querySelectorAll('.resize');
    for (var j = 0; j < resizes.length; j++) {
        resizes[j].style.width = parseInt(resizes[j].style.width) * scaleW + 'px';
        resizes[j].style.height = parseInt(resizes[j].style.height) * scaleH + 'px';
        resizes[j].style.top = parseInt(resizes[j].style.top) * scaleH + 'px';
        resizes[j].style.left = parseInt(resizes[j].style.left) * scaleW + 'px';

    }

    //字体元素也根据比例调整
    var scales = document.querySelectorAll('.txt');
    for (var i = 0; i < scales.length; i++) {
        ss = scales[i].style;
        ss.webkitTransform = ss.MsTransform = ss.msTransform = ss.MozTransform = ss.OTransform = ss.transform = 'translateX(' + scales[i].offsetWidth * (scaleW - 1) / 2 + 'px) translateY(' + scales[i].offsetHeight * (scaleH - 1) / 2 + 'px)scaleX(' + scaleW + ') scaleY(' + scaleH + ') ';
    }


</script>
</body>
<!-- 先引入 Vue -->
<script src="/vue.js"></script>
<!-- 引入组件库 -->
<script src="/mint.js"></script>
<script src="/axios.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            popupVisible: false,
            mobile: '',
            code: '',
            loading:false,
            errorMessage:'',
            sendeMessageText: '发送验证码',
            countDown: 60,
            timer: null,
            showCountDown: false
        },
        methods: {
            handleClick: function () {
                this.popupVisible = true
            },
            sendMessage() {
                if(this.loading==true){
                    return
                }
                this.startCountDown()
                this.$indicator.open();
                this.loading=true
                axios.post('/api/sendMessage', {
                    mobile: this.mobile
                }).then(response=>{
                    this.loading=false
                    this.$indicator.close();
                    console.log(response);
                    if(response.data.code==0){
                        this.$toast({
                            message: '操作成功',
                            iconClass: 'icon icon-success',
                            position:'top'
                        })

                    }else{
                        this.loading=false
                        this.$indicator.close();
                        this.$toast({
                            message: response.data.msg,
                            iconClass: 'icon icon-success',
                            position:'top'
                        })
                        this.stopCountDown()
                        this.$toast(response.data.msg)
                    }
                })
                    .catch(function (error) {
                        this.loading=false
                        this.stopCountDown()
                        this.$indicator.close();
                        console.log(error);
                    });
            },
            startCountDown() {
                this.showCountDown = true;
                this.timer = setInterval(() => {
                    if (this.countDown > 0) {
                        this.countDown -= 1;
                    } else {
                        this.stopCountDown();
                    }
                }, 1000);
            },
            stopCountDown() {
                clearInterval(this.timer);
                this.timer = null;
                this.showCountDown = false;
                this.countDown = 60;
            },
            saveMessage(){
                if(this.loading==true){
                    return
                }
                axios.post('/api/saveMessage', {
                    mobile: this.mobile,
                    code:this.code,
                    luodiye_id:{{$id}}
                }).then(response=>{e
                    this.loading=false
                    this.$indicator.close();
                    console.log(response);
                    if(response.data.code==0){
                        this.$toast({
                            message: '操作成功',
                            iconClass: 'icon icon-success',
                            position:'top'
                        })
                    window.location.href='{{$url}}'

                    }else{
                        this.loading=false
                        this.$indicator.close();
                        this.$toast({
                            message: response.data.msg,
                            iconClass: 'icon icon-success',
                            position:'top'
                        })

                        this.$toast(response.data.msg)
                    }
                })
                    .catch(function (error) {
                        this.loading=false

                        console.log(error);
                    });
            }
        }
    })
</script>
</html>
